<template>
  <div class="box">
    <div>
      <router-link to="/card_task">
        <el-button type="primary">新建任务</el-button>
      </router-link>

      <el-tabs v-model="activeName" @tab-click="handleClick" class="topbox">
        <el-tab-pane label="我的任务" name="first">
          <div>
            <van-search v-model="value" placeholder="搜索名称" />
          </div>
          <div class="select-box">
            <div class="select-group">
              任务类型
              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="select-group">
              状态
              <el-select v-model="value" placeholder="正在进行">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="select-group">
              优先级
              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="select-group">
              截至时间
              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我下属的任务" name="second">
          <div>
            <van-search v-model="value" placeholder="搜索名称" />
          </div>
          <div class="select-box">
            <div class="select-group">
              <label style=" color: #999;
    margin-right: 5px;">任务类型</label>

              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="select-group">
              <label style=" color: #999;
    margin-right: 5px;">状态</label>

              <el-select v-model="value" placeholder="正在进行">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="select-group">
              <label style=" color: #999;
    margin-right: 5px;">优先级</label>

              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="select-group">
              <label style=" color: #999;
    margin-right: 5px;">截至时间</label>

              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
Vue.use(Search);
export default {
  name: "",
  data() {
    return {
      activeName: "second",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      value: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang='scss'>
.el-input__inner {
  padding: 0 8px;
}
.el-select {
  width: 100px;
}
.box {
  padding: 0 30px;
  width: 950px;
  height: 640px;
  border: 2px solid #f2f1f1;
  position: relative;
  border-radius: 10px;
  .el-button {
    position: absolute;
    padding: 5px 15px;
    height: 28px;
    top: 5px;
    right: 40px;
    z-index: 9;
  }
  .van-search__content {
    background: #fff;
  }
  .van-search {
    width: 350px;

    .van-cell {
      background: #fff;
      border: 1px solid #c0c4cc;
      border-radius: 5px;
    }
  }
  .select-box {
    margin-top: 22px;
    margin-bottom: 20px;
    max-width: 855px;
    overflow: hidden;
    .select-group {
      margin-bottom: 12px;
      width: 190px;
      float: left;
    }
  }
}
</style>
